How do I install the item?
Copy and paste all the items in the code folder to your server to your desired location.
What are those i class"fa " things?
That is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here http://fortawesome.github.io/Font-Awesome/icons/
How do I change the contact form information?
There is only one PHP file in the item, please open that item and replace the email address with yours.
How do I make the login page / sign in page / calendar page to work?
Please remember that this is a site template and is not connected to any CMS or any databases, so these features are mearly template designs, they are HTML and CSS and need to be connected to a back-end to work.
<div class="all-elements">
<div class="header">
<!--Check Header Chapter-->
</div>
<div class="header-clear"></div>
<ul class="top-menu">
<!-- This is the dropdown menu from the top. Check Top Menu Chapter-->
</ul>
<a href="#" class="show-big-menu"><i class="fa fa-navicon bg-red2"></i></a>
<!--The above anchor shows the top menu-->
<div class="footer-menu">
<!-- This is the right ball menu, check Ball Menu Chapter-->
</div>
<div class="menu-background"><!--This is the overlay when clicking the menus-->
<div class="content">
<!-- Add your content and container classes here -->
</div>
</div>
The all-content class houses all elements and has a few overflow properties added to it to make it keep everything in place on mobiles.
The class="header" is a fixed class and requires a class="header-clear" after it to add a spacing so elements don't got underneeth it
The class="show-big-menu" is the dropdown menu that appears when you tap the left hand ball
The class="footer-menu" is the menu on the right that houses the balls
<div class="header">
<a class="header-logo" href="#"></a>
<div class="header-icons">
<a class="bg-green2 show-share-bottom" href="#"><i class="fa fa-share"></i></a>
<a class="twitter-color" href="#"><i class="fa fa-twitter"></i></a>
<a class="facebook-color" href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="decoration"></div>
</div>
<div class="header-clear"></div>
Line 1 is the header wrapper. The header is set to a fixed position
Line 2 is the header logo, to replace the header logo, open style.css and locate line 112. There, replace the background-image with your image and make sure it's double the size. Now, replace the width, height, and background size with HALF of those of your logo. This well keep it crisp and sexy on retina / high resolution screens.
Line 3 houses the header icons. you can replace the icons using font-awesome and you can change the colors to those specified below: .bg-blue1, .bg-blue2, .bg-magenta1 .bg-magenta2, .bg-dark1 , .bg-dark2 .bg-green, .bg-green2, .bg-red1, .bg-red2, .bg-teal1, .bg-teal2, .bg-yellow2, .bg-yellow1, .bg-orange1, .bg-orange2. The class show-share-bottom will show the bottom share pop-up when tapped.
Line 8 is the decoration.
The last line is the header clear. This is just an empty div with a big space in it to clear the fixed positioning of the header so elements don't render under it.
The fullscreen slider is covered in our second documentation. You can check it out there.
<div class="circle-slider half-bottom">
<div>
<img src="images/slider/1.jpg" alt="img">
<h1>Welcome to Cricle</h1>
<em class="text-red1 half-bottom">A creative, mobile and tablet template!</em>
</div>
</div>
Line 1 is the slider wrapper and function creator
Lines 2, 3, 4, 5, 6 is a slide element. duplicating this will create a new slide
Line 3 is the image
Line 4 is the title
Line 5 is the description.
Line 6 closes the slide
Line 7 closes the slider
<div class="slider-container full-bottom">
<div class="homepage-slider" data-snap-ignore="true">
<div>
<div class="overlay"></div>
<div class="homepage-slider-caption homepage-left-caption">
<h3>Swipe me!</h3>
<p>Hope you enjoy our latest item!</p>
</div>
<img src="images/pictures/3.jpg" class="responsive-image" alt="img">
</div>
</div>
</div>
Line 1 is the slider wrapper
Line 2 is the slider function wrapper
Line 3,4,5,6,7,8,9,10 is a single slide. Duplicate it to create more slides
Line 4 is the overlay. This darkens the background
Line 5 is the slider caption wrapper
LIne 6 is the heading
Line 7 is the text
Line 8 closes the caption wrapper
Line 9 is the image
Line 10 closes the slide
Line 11 closes the slider function wrapper
Line 12 closes the enclosing slider wrapper.
The landing page with thumbnails uses the same structure as everything else except for the fact that it does not have the regular ball menus ( and these cannot be added to it )
The landing thumbnails page has the all elements class, the header at the top, the ball menu, the footer and the share bottom.
ATTENTION
On the landing page with thhumbnails, the BODY must have the class "circle-homepage"
<ul>
<li>
<a href="index.html">
<i class="fa fa-home bg-red1"></i>
<em>Home</em>
</a>
</li>
<li>
<a href="list-features.html">
<i class="fa fa-cog bg-green2"></i>
<em>Features</em>
</a>
</li>
<li>
<a href="list-gallery.html">
<i class="fa fa-camera bg-blue2"></i>
<em>Galleries</em>
</a>
</li>
</ul>
The UL houses LI classes. Duplicate the LI's to create more menus. We strongly recommend not using more than 9 items as this will keep it very elegant on mobiles.
Each li class has the following
An anchor - the menu item.
An icon class - using font awesome
An em class - The description
<div class="container">
<a href="#" class="next-staff"></a>
<a href="#" class="prev-staff"></a>
<div class="staff-slider" data-snap-ignore="true">
<div><!--Duplicate Me-->
<div class="staff-item">
<img src="images/pictures/1s.jpg" alt="img">
<h4>John Doe</h4>
<em>Web Designer</em>
<strong>We love quotes, and sometimes it's</strong>
<a href="#" class="button button-red center-button">Call</a>
</div>
</div>
</div>
</div>
To create more slides, simply duplicate the class that has the <!--Duplicate Me--> comment.
After doing so, replace the image and text with your own, and you have a new slide
<div class="content">
<div class="container">
</div>
<div class="decoration"></div>
</div>
The following structure is used in the template. The content class adds a margin left and right to aling the elements perfectly. And the container class adds a margin botton to your sections to keep the visual heirarchy clean.
However, when using content headings, you must close the content class and use the code bellow, then remake the structure above, sicne content headings take the full width of the screen
<div class="content-heading">
<h4>Featured Project</h4>
<p>Check and enjoy our featured item</p>
<i class="fa fa-star-o"></i>
<div class="overlay"></div>
<img src="images/pictures/7w.jpg" alt="img">
</div>
You can replace the image, the icon, and the text to better describe your section.
No! We have 2 documentations. This one explained the main features of the template, and it's structure. The second documentation describes the features from each indivudual page.
If there is anything you don't understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that's related to the template! We take great pride in providing top notch support to all our customers!
Please don't forget to rate 5 stars!